<template>
  <view class="container">
    <!-- <view class="content-title">
      <view @click="gotoPage(`/events/eventsMarket?id=${pageData.activityId}`)">活动详情</view>
      <view class="line">|</view>
      <view @click="gotoPage('/pages/eventsList', 1)">其他活动</view>
    </view> -->
    <view class="activity-box" @click="gotoDetail">
      <view class="image-view">
        <image class="image-class" :src="pageData.coverImage" mode="aspectFill"/>
      </view>
      <view class="text-view">
        <view style="flex:1">
          <view class="view-title u-line-2">
            {{ pageData.activityName }}
          </view>
          <view class="view-date">
            <view style="display:flex;color:#F53F3F" v-if="pageData.timeStatus?.status === 2">
              距开奖还剩
              <uni-countdown :day="countdownTime.day" :hour="countdownTime.hour" :minute="countdownTime.minute" :second="countdownTime.second" :start="countdownTime.start" @timeup="getInit" :show-colon="false" color="#F53F3F" splitorColor="#F53F3F" :font-size="12"></uni-countdown>
            </view>
            <view style="color:#F53F3F" v-if="pageData.timeStatus?.status === 3">
              活动已结束
            </view>
          </view>
        </view>
        <view class="btn">
          我也想参加
        </view>
      </view>
    </view>
    <view class="text-center" v-if="!pageData.hasAssisted && pageData.timeStatus?.status === 2">
      就差你帮忙了
    </view>
    <view class="content-title" style="justify-content: center;padding:0" v-else>
      <view style="color:#000000;padding-right: 6rpx">您可以看看</view>
      <!-- <view @click="gotoPage(`/events/eventsMarket?id=${pageData.activityId}`)">活动详情</view>
      <view style="padding:6rpx;color:#000000">或</view> -->
      <view @click="gotoPage('/pages/eventsList', 1)">其他活动</view>
    </view>
    <view style="text-align: center;font-size:24rpx;color:#414141;margin-top:6rpx">
      来自：“{{pageData.ownerCustomerNickname}}”的分享
    </view>
    <view class="bottom-code">
      <image src="https://img.qumoyugo.com/webimgbg/picopino_assistance_code_help_btm.png" class="img" show-menu-by-longpress></image>
    </view>
    <template v-if="pageData.timeStatus">
      <view class="btn-opt u-center" :class="!pageData.hasAssisted && pageData.timeStatus?.status === 2 ? 'help' : ''" @click="helpOwnerRecord">
        {{ pageData.timeStatus?.status === 2 ? pageData.hasAssisted ? '已经帮过TA了' : '帮TA一下' : '已开奖' }}
      </view>
    </template>
    <uni-popup ref="toastPopup" type="center">
      <view class="toast-box-tips">
        <view class="name">
          {{ showText }}
        </view>
        <view class="content-title" style="justify-content: center;padding:0">
          <view style="color:#000000;padding-right: 6rpx">您可以看看</view>
          <view @click="gotoPage(`/events/eventsMarket?id=${pageData.activityId}`)">活动详情</view>
          <view style="padding:6rpx;color:#000000">或</view>
          <view @click="gotoPage('/pages/eventsList', 1)">其他活动</view>
        </view>
      </view>
      <view class="u-center">
        <img src="https://img.qumoyugo.com/img/EJJ4F9RL2R0UM61RIR5SN1710143189449.png" style="width:70rpx;height:70rpx" @click="() => toastPopup.close()">
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import { urlGetObj, storage } from '@/utils/utils'
import { useStore } from '@/store'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { SHOW_TAB_TYPE } from '@/assets/js/config'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const optionsData = ref({})
const pageData = ref({})
const store = useStore()
const toastPopup = ref()
const showText = ref('')
const countdownTime = ref({
  day: 0,
  hour: 0,
  minute: 0,
  second: 0,
  start: false
})
onLoad(async options => {
  optionsData.value = options
})
onShow(async () => {
  if (optionsData.value.scene) {
    const res = await $https({
      url: `/common/param/${optionsData.value.scene}`,
      type: ''
    })
    if (res.code === 0) {
      optionsData.value = urlGetObj(res.data)
    }
  }
  getInit()
})
const customerId = computed(() => {
  return store.state.profile?.attr?.customerId
})
const getInit = (isFirst) => {
  $https({
    url: `/activityInfo/owner/${optionsData.value.activityOwnerId}`,
    type: ''
  }).then(res => {
    if (res.code === 0) {
      pageData.value = res.data
      if (res.data.timeStatus.status === 2) {
        getCountdownTime(res.data.serverTime, res.data.endTime)
      }
    }
  })
}
const helpOwnerRecord = () => {
  if (!customerId.value) {
    gotoLogin()
    return false
  }
  if (pageData.value.timeStatus?.status === 3) {
    uni.showToast({
      title: '已开奖',
      icon: 'none'
    })
  }
  if (pageData.value.timeStatus?.status === 2) {
    if (pageData.value.hasAssisted) {
      toastPopup.value.open()
      showText.value = '您已帮TA助过力啦～'
    } else {
      $https({
        url: '/activityInfo/owner/record',
        type: '',
        method: 'post',
        data: {
          ownerId: optionsData.value.activityOwnerId
        }
      }).then(res => {
        if (res.code === 0) {
          uni.showToast({
            title: '助力成功',
            icon: 'none',
            success: () => {
              setTimeout(() => {
                uni.navigateTo({
                  url: `/events/eventsMarket?id=${pageData.value.activityId}`,
                  success: () => {
                    getInit()
                  }
                })
              }, 2000)
            }
          })
        }
      })
    }
  }
}
// 跳转登录
const gotoLogin = () => {
  const url = `/pages/login?redirect=${encodeURIComponent('/events/marketFriend?relationActivityId=' + pageData.value.activityId + '&activityOwnerId=' + optionsData.value.activityOwnerId + '&entryType=' + optionsData.value.entryType)}`
  uni.reLaunch({
    url
  })
}
const getCountdownTime = (startTime, endTime) => {
  startTime = startTime.replace(/-/g, '/')
  endTime = endTime.replace(/-/g, '/')
  const current = new Date(endTime) - new Date(startTime)
  countdownTime.value = {
    day: Math.floor(current / 1000 / 24 / 60 / 60),
    hour: Math.floor((current % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
    minute: Math.floor((current % (1000 * 60 * 60)) / (1000 * 60)),
    second: Math.floor((current % (1000 * 60)) / 1000),
    start: true
  }
}
const gotoPage = (url, type) => {
  if (type) {
    storage.set(SHOW_TAB_TYPE, 'activity')
    uni.switchTab({
      url: '/pages/eventsList'
    })
  } else {
    uni.navigateTo({
      url
    })
  }
}
const gotoDetail = () => {
  uni.navigateTo({
    url: `/events/eventsMarket?id=${pageData.value.activityId}`
  })
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.container {
  height: 100vh;
  background: #FFF8F0;
  padding: 20rpx;
  position: relative;
}
.bottom-code{
  position: absolute;
  bottom: max(40px, env(safe-area-inset-bottom));
  height: 371rpx;
  left: 30rpx;
  right: 30rpx;
  .img{
    width: 100%;
    height: 100%;
  }
}
.content-title{
  font-size: 24rpx;
  color: #3289CA;
  line-height: 24rpx;
  padding: 40rpx 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .line{
    width: 2rpx;
    height: 24rpx;
    background: #CACACA;
    border-radius: 1000px 1000px 1000px 1000px;
    margin: 0 20rpx;
    background: #CACACA;
  }
}
.activity-box{
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  font-size: 24rpx;
  margin-bottom: 100rpx;
  .image-view {
    width: 220rpx;
    min-width: 220rpx;
    height: 292rpx;
    background: #f4f4f4;
    border-radius: 20rpx;
    .image-class {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
  .text-view{
    flex: 1;
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    .btn{
      width: 220rpx;
      height: 64rpx;
      background: #000000;
      border-radius: 100rpx;
      color: #F9C687;
      font-size: 28rpx;
      line-height: 64rpx;
      text-align: center;
      align-self: flex-end;
    }
  }
  .view-title {
    margin: 40rpx 0 20rpx 0;
    font-size: 34rpx;
    font-weight: bold;
    color: #000;
  }
}
.text-center{
  color:#000000;
  font-size:26rpx;
  text-align: center;
  font-weight: bold;
}
.btn-opt{
  width: 480rpx;
  height: 80rpx;
  background: #FCDBAB;
  border-radius: 1000rpx;
  margin: 30rpx auto;
  color: #414141;
  font-size: 32rpx;
  font-weight: bold;
  &.help{
    border: 1px solid #414141;
    color: #FFFFFF;
    background-color: #F0831E;
  }
}
.toast-box-tips{
  width: 522rpx;
  height: 550rpx;
  background: url('https://img.qumoyugo.com/img/7CQOS7P6KM2K0P0LE2VB1710148557593.png') no-repeat;
  background-size: 100%;
  padding-top: 290rpx;
  .name{
    font-size: 34rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 26rpx;
  }
}
.popup-content{
  position: relative;
  padding-top:90rpx;
  background: url(https://img.qumoyugo.com/webimgbg/picopino_activity_paihangban_bg_top_record.png) no-repeat;
  background-size: 100%;
  .main-box{
    background-color: #FFEBBF;
    padding-bottom: 50rpx;
    .title{
      text-align: center;
      font-weight: bold;
      font-size: 30rpx;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      margin: 0 40rpx;
      padding-bottom: 30rpx;
    }
    .close{
      width: 80rpx;
      height: 80rpx;
      background: url(https://img.qumoyugo.com/webimgbg/picopino_activity_paihangban_close_btn.png) no-repeat;
      background-size: 100%;
      position: absolute;
      top: 0;
      left: 56rpx;
    }
  }
  .add-icon{
    width: 170rpx;
    height: 170rpx;
    border-radius: 30rpx;
    background-color: #fff;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 70rpx auto;
    font-size: 24rpx;
    color: #3289CA;
    .pet-add-image{
      width: 38rpx;
      height: 36rpx;
      margin-bottom: 10rpx;
    }
  }
  .btn-cancle{
    font-size: 30rpx;
    color: #737373;
    line-height: 30rpx;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center;
  }
}
:deep(.activity-box .uni-countdown__splitor){
  margin: 0;
  font-size: 12px !important;
}
:deep(.activity-box .uni-countdown__number){
  width: auto !important;
}
</style>
